<template>
  <div>
        <div class="search-bar">
            <van-row>
                <van-col span="3">
                    <img :src="positionIcon" class="position" />
                </van-col>
                <van-col span="16">
                    <input type="text" placeholder="查找" class="search-input" />
                </van-col>
                <van-col span="5" class="search-btn">
                    <van-button size="mini">查找</van-button>
                </van-col>
            </van-row>
        </div>
        <div class="swipe-area">
            <van-swipe :autoplay='2000' :show-indicators="true">
                <van-swipe-item v-for=" (banner,index) in bannerPicArr" :key="index" >
                    <img v-lazy="banner.image" width="100%" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="type-bar">
            <div v-for="(cate,index) in category" :key="index" >
                <img v-lazy="cate.image" width="90%" />
                <span>{{cate.mallCategoryName}}</span>
            </div>
        </div>
        <!-- AD banner area -->
        <div class="ad-banner">
            <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%" />
        </div>
        <!-- Recomment goods area -->
        <div class="recommend-area">
            <div class="recommend-title">
                商品推荐
            </div>
            <div class="recommend-body">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item,index) in recommendGoods" :key="index">
                        <div class="recommend-item">
                            <img :src="item.image" width="80%" />
                            <div>{{item.goodsName}}</div>
                            <div>￥{{item.price | moneyFilter}}</div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <!-- 休闲食品 -->
        <floor-component :floorData="floor1" :floorTitle="floorTitle.floor1" :flag="flag[0]"></floor-component>
        <floor-component :floorData="floor2" :floorTitle="floorTitle.floor2" :flag="flag[1]"></floor-component>
        <floor-component :floorData="floor3" :floorTitle="floorTitle.floor3" :flag="flag[2]"></floor-component>
        <!-- <swiperDefault></swiperDefault> -->
        <!-- <swiperDefault1></swiperDefault1> -->
        <!-- <swiperDefault2></swiperDefault2> -->
        <!-- 热卖商品 -->
        <div class="hot-area">
            <div class="hot-title">热卖商品</div>
            <div class="hot-goods">
                <!-- 热卖商品 -->
                <van-list>
                    <van-row class="hot-row">
                        <van-col span="12" v-for="(item,index) in hotGoods" :key="index" >
                            <goods-info :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
                        </van-col>
                    </van-row>
                </van-list>
            </div>
        </div>
  </div>
</template>

<script>
import axios from 'axios';
import 'swiper/dist/css/swiper.css';
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import floorComponent from '../component/floorComponent'
import {toMoney} from "@/filter/moneyFilter.js"
import goodsInfo from "../component/goodsInfoComponent"
import url from "@/serviceAPI.config.js"
// import swiperDefault from '../awesomeSwiper/swiperDefault'
// import swiperDefault1 from '../awesomeSwiper/swiperDefault1'
// import swiperDefault2 from '../awesomeSwiper/swiperDefault2'
export default {
  name: 'ShoppingMall',
  data () {
    return {
      category: null,
      positionIcon: require("../../assets/position.png"),
      bannerPicArr:[],
      adBanner: '',
      recommendGoods:[],
      swiperOption:{
          slidesPerView: 3,
      },
      floor1:[],
      floorTitle: '',
      floor2:[],
      floor3:[],
      flag:[1,2,3],
      hotGoods:[]
    }
  },
  components:{
      swiper,
      swiperSlide,
      floorComponent,
      goodsInfo
    //   swiperDefault,
    //   swiperDefault1,
    //   swiperDefault2
  },
  filters:{
      moneyFilter(money){
          return toMoney(money);
      }
  },
  created(){
      axios({
          url: url.getShoppingMallInfo,
          method: 'get'
      })
      .then(response=>{
          console.log(response)
          if(response.status == 200){
              this.category = response.data.data.category;
              this.adBanner = response.data.data.advertesPicture;
              this.bannerPicArr = response.data.data.slides;
              this.recommendGoods = response.data.data.recommend;
              this.floor1 = response.data.data.floor1;
              this.floor2 = response.data.data.floor2;
              this.floor3 = response.data.data.floor3;
              this.floorTitle = response.data.data.floorName;
              this.hotGoods = response.data.data.hotGoods;
          }
      })
      .catch(error=>{
          console.log(error)
      })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search-bar{
    height:2.2rem;
    background-color: #e5017d;
    line-height: 2.2rem;
    overflow: hidden;
}
.position{
    padding-left:.2rem;
    padding-top: .3rem;
}
.search-input{
    width:100%;
    height:1.3rem;
    border-top:0px;
    border-left:0px;
    border-right:0px;
    border-bottom: 1px solid #fff;
    background-color: #e5017d;
    color:#fff;
}
input::-webkit-input-placeholder {
   color: #eee;
    font-size: .8rem;
    text-align: left;
}
.search-btn{
    text-align: center;
}
.swipe-area{
    clear:both;
    max-height: 10rem;
    overflow: hidden;
}
.type-bar{
    background-color: #fff;
    margin: 0 .3rem .3rem .3rem;
    border-radius: .3rem;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.type-bar div{
    padding: .3rem;
    font-size: 12px;
    text-align:center;
}
.recommend-area{
    margin-top: 0.3rem;
}
.recommend-title{
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    padding: .2rem;
    color:#e5017d;
}
.recommend-body{
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.recommend-item{
    border-right: 1px solid #eee;
    font-size: 12px;
    text-align: center;
}
.hot-area{
    text-align: center;
    font-size: 14px;
    height: 1.8rem;
    line-height: 1.8rem;
}
/* .hot-row{
    width:99%;
} */
</style>
